MIAW custom pre-chat example #155
Conversation
| @@ -0,0 +1,12 @@ | |||
| <template> | |||
| <template class="slds-m-around_medium" for:each={fields} for:item="field"> | |||
| <c-custom-prechat-form-field key={field.name} | |||
There was a problem hiding this comment.
created a separate component to render each formField, mainly to demonstrate how a customer can distinguish between a text field vs a dropdown (choiceList) field.
| } | ||
| } | ||
|
|
||
| isValid() { |
There was a problem hiding this comment.
thinking of renaming this to isFormValid
| @@ -0,0 +1,18 @@ | |||
| <template> | |||
| <template lwc:if={isTypeChoiceList}> | |||
There was a problem hiding this comment.
ChoiceLists can be rendered using lightning-combobox while the rest of the fields can simply be lightning-input with the appropriate value for type attribute.
| } | ||
|
|
||
| @api | ||
| reportValidity() { |
There was a problem hiding this comment.
required for validating each formField on Start Conversation click. A customer can choose their own way of validating the form but I just thought we can show them an example.
| @@ -0,0 +1,13 @@ | |||
| :host { | |||
| display: flex; | |||
There was a problem hiding this comment.
just some basic styling here. planning to just add a note about configuration.branding so that customers can consume the branding information from config as they seem fit.
| } | ||
|
|
||
| /** | ||
| * Adds values to fields of type choiceList (dropdown). |
There was a problem hiding this comment.
| * Adds values to fields of type choiceList (dropdown). | |
| * Adds values to choiceList (dropdown) fields. |
| } | ||
|
|
||
| /** | ||
| * Returns prechat form fields sorted by their display order. |
There was a problem hiding this comment.
| * Returns prechat form fields sorted by their display order. | |
| * Returns pre-chat form fields sorted by their display order. |
| } | ||
|
|
||
| /** | ||
| * Iterates over and reports validity for each form field. Returns true if all the fields are valid. |
There was a problem hiding this comment.
| * Iterates over and reports validity for each form field. Returns true if all the fields are valid. | |
| * Iterates over and validates each form field. Returns true if all the fields are valid. |
| } | ||
|
|
||
| /** | ||
| * Gathers and submits prechat data to the app on start converation button click. |
There was a problem hiding this comment.
| * Gathers and submits prechat data to the app on start converation button click. | |
| * Gathers and submits pre-chat data to the app on start-conversation-button click. |
No description provided.